<style scoped lang="stylus">
  @import "index.styl";
</style>
<template>
  <!--瀑布流-->
  <div id="waterfallContainer">
    <van-list
      v-model="loading"
      :finished="finished"
      :offset=50
      @load="onLoad">
      <div class="waterfall">

        <div class="item" v-for="(item,index) in list" :key="index" @click="onItemClick(index)">
          <div class="item-content">
            <div class="item-content-top">
              <img v-lazy="item.imageUrl"/>
            </div>

            <div class="item-content-bottom">
              <div class="item-content-bottom-goods-name">
                {{item.title}}
              </div>

              <div class="item-content-bottom-goods-price-count">
                <div class="price">
                  <span class="rmb">¥</span>
                  <span class="money">{{item.price}}</span>
                </div>
                <div class="count">{{item.count}}付款</div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </van-list>

    <load-finish :isShow="finished"></load-finish>

  </div>
</template>

<script>

  import LoadFinish from '../../components/loadFinish/index.vue';

  import {List, Cell} from 'vant';

  export default {
    name: 'waterfallContainer',

    // 接受上一个界面传递过来的参数
    props: {
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        loading: false,
        finished: false
      };
    },
    // 组件
    components: {
      VanList: List,
      VanCell: Cell,
      LoadFinish: LoadFinish,
    },

    // 页面创建完毕
    mounted() {
    },

    // 方法
    methods: {
      onLoad() {
        this.$emit('onLoad');
      },


      updateLoadingStatus(status) {
        this.loading = status;
      },

      loadFinished() {
        this.finished = true;
      },

      /**
       * 商品详情页
       */
      onItemClick(index) {
        let data = this.list[index];
        this.$emit('onItemClick', index ,data);
      },
    },
  };
</script>
